<template>
  <!-- 事件信息 -->
  <div v-if="thisDiv === 3">
    <table>
      <slot name="left"/>
      <tr>
        <td class="td-title">发生院区</td>
        <td>{{ getHospitalArea(formData.baqsjRecordReport.eventDivision) || '' }}</td>
        <td class="td-title">发生地点</td>
        <td>{{ getIncidentLocation(formData.baqsjRecordReport.eventLocale) || '' }}</td>
        <td class="td-title">发生日期/时间</td>
        <td>{{ formData.baqsjRecordReport.eventTime || '' }}</td>
      </tr>
      <slot name="right"/>
    </table>
  </div>
  <div v-else style="display: flex; width: 100%; flex-wrap: wrap; ">
    <slot name="left"/>
    <el-form-item label="发生院区" prop="baqsjRecordReport.eventDivision">
      <el-radio-group v-model="formData.baqsjRecordReport.eventDivision">
        <el-radio v-for="(item, index) in hospitalAreaList" :key="index" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>

    <div style="width: 100%" />

    <el-form-item label="发生地点" prop="baqsjRecordReport.eventLocale">
      <el-radio-group v-model="formData.baqsjRecordReport.eventLocale">
        <el-radio v-for="(item, index) in incidentLocationList" :key="index" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
      <el-input
        v-if="formData.baqsjRecordReport.eventLocale && formData.baqsjRecordReport.eventLocale === '7'"
        :style="{ width: '200px' }"
        placeholder="请输入地点"
        v-model="formData.baqsjRecordReport.eventLocaleOther"
      />
    </el-form-item>

    <div style="width: 100%" />

    <el-form-item label="发生日期/时间" prop="baqsjRecordReport.eventTime">
      <el-date-picker
        :style="{ width: '300px' }"
        v-model="formData.baqsjRecordReport.eventTime"
        type="datetime"
        placeholder="选择日期时间"
      />
    </el-form-item>
    <slot name="right"/>
  </div>
</template>

<script>
import { getSysdivision } from '@/api/system/division'

export default {
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    thisDiv: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      hospitalAreaList: [],
      incidentLocationList: [
        { value: '1', label: '病区' },
        { value: '2', label: '门急诊' },
        { value: '3', label: '检查室' },
        { value: '4', label: '实验室' },
        { value: '5', label: '公共区域' },
        { value: '6', label: '不明' },
        { value: '7', label: '其他' }
      ]
    }
  },
  created() {
    getSysdivision({ currentPage: 1, pageSize: 1000 }).then(res => {
      this.$nextTick(() => {
        if (res.records) {
          res.records.forEach(item => {
            item.value = '' + item.id
            item.label = item.divisionName
          })
          this.hospitalAreaList = res.records
        }
      })
    })
  },
  methods: {
    getHospitalArea(value) {
      const item = this.hospitalAreaList.find(item => item.value === value)
      return item ? item.label : value
    },
    getIncidentLocation(value) {
      const item = this.incidentLocationList.find(item => item.value === value)
      if (value === '7' && item) {
        return item.label + '（' + this.formData.baqsjRecordReport.eventLocaleOther + '）'
      }
      return item ? item.label : value
    }
  }
}
</script>
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}
</style>
